<template>
	<div class="add-jq-dialog">
		<!--添加集群-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="配置"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			width="30%"
			>
			
			<el-form 
				ref="addForm" 
				:rules="rules" 
				:model="addForm"
				label-width="100px"
				
				>
			
				<el-form-item label="类型：" prop="clusterName">
					<nameInput @change="changeName"
						></nameInput>
				</el-form-item>

                <el-form-item label="键名：" prop="clusterName">
					<nameInput @change="changeName"
						></nameInput>
				</el-form-item>

                <el-form-item label="名称：" prop="clusterName">
					<nameInput @change="changeName"
						></nameInput>
				</el-form-item>

                <el-form-item label="值：" prop="clusterName">
					<nameInput @change="changeName"
						></nameInput>
				</el-form-item>
				
				<el-form-item label="备注：">
					<appTextarea @change="changeDESC"></appTextarea>
				</el-form-item>
				
			</el-form>
			
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import nameInput from "@/view/components/input/nameInput";
import appTextarea from "@/view/components/textarea/textArea";
import {save} from "@/service/swagger/ResourceClusterController"

export default {
	name: "addJQDialog",
	components: {
		appdialog,
		nameInput,
		appTextarea
	},
	data() {
    return {
      addForm : {
      	clusterType : "",
      	clusterName : "",
      },
      rules : {
      	clusterType: [
          { required: true, message: '请选择集群类型', trigger: 'change' },
        ],
      	clusterName: [
          { required: true, message: '请输入集群名称', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
  	
  },
	methods:{
   	open(){
   		this.$refs.dialog.open();
   	},
   	
   	confirmAdd(){
   		console.log("确认添加" , this.addForm )
   		
   		// 验证表单
   		this.$refs.addForm.validate((valid) => {
        if (valid) {
        	// 验证通过
          this.submitAdd();
        } else {
        	setTimeout(()=>{
        		this.open();
        	},50)
          
          return false;
        }
      });
   		// 
   	},
   	submitAdd(){
   		save({...this.addForm}).then(ret=>{
   			this.$message({
          message: '创建成功',
          type: 'success',
          duration : 2000,
        });
        
        this.$refs.dialog.close();
        this.$emit("addSucess")
   		})
   	},
   	cancleAdd(){
   		
   	},
   	
   	changeHJ(name,v){
   		console.log("环境选项改变：",name,v)
   		this.addForm.clusterType = v ;
   	},
   	changeName(name,v){
   		console.log("name改变：",name,v)
   		this.addForm.clusterName = v ;
   	},
   	changeDESC(name,v){
   		console.log("备注改变：",name,v)
   		
   	}
   	
   	
	}
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";


</style>